import styled from 'styled-components'
import Modal from '@mui/material/Modal'

export const SearchButtonWrap = styled.div`
  .MuiIconButton-root {
    color: ${(p) => p.theme.colors.text};
  }
`
export const ModalWrap = styled(Modal)`
  backdrop-filter: blur(4px);
`

export const ModalMain = styled.div`
  width: 100%;
  height: 100%;
  background-color: ${(p) => p.theme.colors.background};
  border-radius: clamp(0px, (100vw - 768px) * 9999, 10px);
  @media only screen and (min-width: 769px) {
    max-width: 700px;
    height: 600px;
    margin: 60px auto auto;
  }
`

export const ModalHeader = styled.div`
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid ${(p) => p.theme.colors.cardBorder};
  color: ${(p) => p.theme.colors.text};

  .search-form {
    display: flex;
    align-items: center;
    height: 56px;
    width: 100%;
    position: relative;
    color: inherit;
  }

  .search-icon {
    font-size: 32px;
    color: inherit;
    margin-right: 12px;
  }

  .search-input {
    color: inherit;
    width: 80%;
    font-size: 1.2em;
  }

  .search-cancel {
    color: inherit;
    appearance: none;
    background: none;
    border: 0;
    flex-shrink: 0;
    padding: 4px 8px;
    user-select: none;
  }
`
export const ModalDropDown = styled.div`
  max-height: calc(100vh - 73px);
  overflow-y: auto;
  padding: 0 12px;
  color: ${(p) => p.theme.colors.text};
  @media only screen and (min-width: 769px) {
    max-height: calc(600px - 73px);
  }

  .search-no-result {
    margin: 0 auto;
    padding: 36px 0;
    text-align: center;
    width: 80%;
    font-size: 0.9em;
  }

  .search-result {
    padding: 8px 0;
  }

  .list-item {
    margin-top: 4px;
    border: 2px solid transparent;
    font-size: 18px;
    cursor: pointer;
    border-radius: 8px;

    &:hover {
      border-color: ${({ theme }) => theme.colors.second};
    }
  }
`
